<template>
  <div class="card item-ltb img-base">
    <div v-if="bg_color && icon" class="media" :class="bg_color">
      <figure class="icon img">
        <i :class="icon"></i>
      </figure>
    </div>
    <div class="doc">
      <div class="title">{{num}}<span class="unit">{{unit}}</span></div>
      <div class="content">{{title}}</div>
    </div>
  </div>
</template>
<script setup>
import { $post, $get } from "@/api/Api.js";
import { ref,onMounted,toRefs } from "vue";
import {
$fullUrl,
$banseUrl,
} from "@/utils/utils.js";
import { useStore } from 'vuex'
import { useRouter } from "vue-router";
import storageHelper from "@/libs/StorageHelper";
let UserInfo = storageHelper.getUserInfo();
let router = useRouter();
let store = useStore()
const emit = defineEmits(["changeTab"]);
const props = defineProps({
  unit: {
      type: String,
      default: "单位",
    },
    title: {
      type: String,
      default: "内容"
    },
    url: {
      type: String,
      default: ""
    },
    bg_color: {
      type: String,
      default: ""
    },
    icon: {
      type: String,
      default: ""
    },
});
let { unit, title, url, bg_color,icon} = toRefs(props);
let num=ref(0)
// 获取数量
let get_url_num=()=> {
    $get('/api'+url.value,null).then((json) => {
            if (json.result || json.result === 0) {
              num.value = json.result;
            }
          }
      )
    }
onMounted(()=>{
  get_url_num()
})


</script>
<style lang="less" scoped>
.img-base figure {
  text-align: center;
  line-height: 4rem;
}

.img-base i {
  font-size: 2.5rem;
}

.img-base .title {
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: .125rem;
}

.img-base .content {
  color: #999;
  font-size: 0.875rem;
  line-height: 1;
}

.img-base .unit {
  font-size: 0.875rem;
  margin-left: .5rem;
  font-weight: normal;
}
</style>
